<template>
  <div class="g-inherit m-article p-namecard">
    <x-header class="m-tab" :left-options="{backText: ' '}">
      <h1 class="m-tab-top">资料详情</h1>
      <a slot="left"></a>
    </x-header>
    <div class="m-list">
        <group class="u-card">
         <cell :inline-desc="'昵称: '+userInfo.name" :title="userInfo.account">
          <img class="icon" slot="icon" width="20" :src="userInfo.avatar||defaultIcon">
         </cell>
         </group>
        <group v-show="userInfo.isFriend" class="u-card">
            <cell title="备注名" is-link :link="remarkLink">{{userInfo.nickname}}</cell>
          </group>
         <div class="u-bottom">
            <x-button type="primary" action-type="button" @click.native="enterChat">聊天</x-button>
            <x-button v-show="userInfo.isFriend" type="warn" action-type="button" @click.native="deleteFriend">删除好友</x-button>
            <x-button v-show="!userInfo.isFriend && !isSelf" type="warn" action-type="button" @click.native="addFriend">添加好友</x-button>
          </div>
    </div>
  </div>
</template>

<script>
import pageUtil from '../utils/page'
import config from '../configs'

export default {
  data () {
    return {
      isBlack: false,
      isSelf: false,
      userInfo:{},
      defaultIcon:config.defaultUserIcon
    }
  },
    mounted(){
      let accout = pageUtil.GetQueryString('imId');
      this.http.post('/im/user',{
          mobile:accout
      })
      .then(res => {
              let data = res.data;
              if(data.code === 200){
                  this.userInfo = data.data;
              }
          }
      )
  },

  computed: {
    remarkLink () {
      return `/namecardremark/${pageUtil.GetQueryString('imId')}`
    }
  },

  methods: {
    changeBlack () {
      this.$store.dispatch('updateBlack', {
        account: this.account,
        isBlack: this.isBlack
      })
    },
    enterChat () {
      location.href = `#/chat/p2p-${this.account}`
    },
    enterHistory () {
      location.href = `#/chatHistory/p2p-${this.account}`
    },
    addFriend () {
        let accout = pageUtil.GetQueryString('imId');
        this.http.post('/im/apply',{
            mobile:accout
        })
        .then(res => {
                let data = res.data;
                if(data.code === 200){
                    this.userInfo.isFriend = !this.userInfo.isFriend;
                }
            }
        )
    },
    deleteFriend () {
      let that = this
      this.$vux.confirm.show({
        title: '删除好友后，将同时解除双方的好友关系',
        onConfirm () {
            let accout = pageUtil.GetQueryString('imId');
            that.http.post('/im/user/delete',{
                mobile:accout
            })
                .then(res => {
                        let data = res.data;
                        if(data.code === 200){
                            that.userInfo.isFriend = !that.userInfo.isFriend;
                        }
                    }
                )
        }
      })
    }
  }
}
</script>

<style type="text/css">
  .p-namecard {
    .m-list {
      padding-top: 3.6rem;
    }
    .u-bottom {
      margin-bottom: 2rem;
    }
    .vux-label{
        color:#656565;
    }
  }

</style>
